<template>
  <div class="join-addEdit">
    <el-dialog :append-to-body="true" :title="title" v-model="show" @close="cancelFun" :close-on-click-modal="false" destroy-on-close>
      <div class="wuliu-box">
        <div class="wuliu" v-if="status == 'wuliu'">
          <!-- <div class="title">物流信息</div> -->
          <div class="wuliu-item" v-for="(item, index) in wuliu" :key="index">
            <div class="time">{{ item.time }}</div>
            <div class="status">{{ item.site }}</div>
            <div class="status">{{ item.description }}</div>
          </div>
        </div>
        <div class="wuliu" v-else>
          {{ data }}
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFun" size="large">取消</el-button>
          <el-button type="primary" @click="confirmFun" size="large">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, onMounted, ref, watch, defineEmits, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getWuliuMessage } from '@api/order'

const props = defineProps({
  data: {
    type: String,
    default: null
  },
  status: {
    type: String,
    default: null
  },
  wuliu_sn: {
    type: String,
    default: null
  },
  show: {
    type: Boolean,
    default: null
  }
})

const emit = defineEmits(['hide'])

const title = computed(() => {
  return props.status == 'wuliu' ? `查看物流${props.wuliu_sn}` : `查看揽货人及提货点信息${props.wuliu_sn}`
})

// 添加或编辑
function confirmFun() {
  emit('hide', 'cancel')
}

function cancelFun() {
  emit('hide', 'cancel')
}

// 获取物流信息
const wuliu = ref([])
const getWuliu = async () => {
  let res = await getWuliuMessage({ wuliu: props.wuliu_sn })
  if (res.code == 200) {
    wuliu.value = res.data
  }
}

onMounted(() => {})

watch(
  () => props.show,
  (newValue, oldValue) => {
    if (props.status == 'wuliu') {
      getWuliu()
    }
  },
  { deep: true }
)
</script>
<style lang="scss" scoped>
.wuliu {
  flex-grow: 2;
  padding: 0 20px;
  overflow-y: auto;
  box-sizing: border-box;

  .wuliu-item {
    margin-bottom: 20px;

    .time {
      margin-bottom: 5px;
    }

    .status {
      font-weight: bold;
    }
  }
}
</style>
